<!--
 * @Description: 右侧第二个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: liqi
 * @LastEditTime: 2022-09-07 19:37:07
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Radar } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    // 加载仪表盘
    loadChart() {
      fetch("https://gw.alipayobjects.com/os/antfincdn/svFjSfJkYy/radar.json")
        .then((data) => data.json())
        .then((data) => {
          const radarPlot = new Radar(this.$refs["container"], {
            data,
            xField: "item",
            yField: "score",
            seriesField: "user",
            meta: {
              score: {
                alias: "分数",
                min: 0,
                max: 80,
              },
            },
            xAxis: {
              line: null,
              tickLine: null,
              grid: {
                line: {
                  style: {
                    lineDash: null,
                  },
                },
              },
            },
            yAxis: {
              line: null,
              tickLine: null,
              grid: {
                line: {
                  type: "line",
                  style: {
                    lineDash: null,
                  },
                },
                alternateColor: "rgba(0, 0, 0, 0.04)",
              },
            },
            // 开启面积
            area: {},
            // 开启辅助点
            point: {
              size: 2,
            },
            tooltip: {
              domStyles: {
                "g2-tooltip": {
                  backgroundColor: "#03255f",
                  color: "#fff",
                },
              },
            },
          });
          radarPlot.render();
        });
    },
  },
  created() {},
  mounted() {
    this.loadChart();
  },
};
</script>
<style scoped>
</style>